<template>
  <div>
    <el-dialog
      :title="mode == 'add' ? `创建点位` : `编辑点位`"
      width="660px"
      v-model="dialogFormVisible"
      :append-to-body="true"
      :close-on-click-modal="false"
    >
      <el-form :model="form" :rules="rules" ref="formRef" class="form">
        <el-form-item
          label-width="120px"
          label="点位名称"
          prop="positionName"
        >
          <el-input
            placeholder="请输入"
            style="width: 360px; height: 36px"
            v-model="form.positionName"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item
          label-width="120px"
          label="点位描述"
          prop="remark"
        >
          <el-input
            placeholder="请输入"
            v-model="form.remark"
            type="textarea"
            :rows="3"
            style="width: 360px;"
            clearable
          ></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取 消</el-button>
          <el-button type="primary" @click="submit">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import {createPositionApi, editPositionApi, pointDTO} from "@/api/region";
import {reactive} from "vue";
import {ElMessage, FormRules} from "element-plus";

export interface Props {
  mode: string,
  regionId: number,
}

const props = withDefaults(defineProps<Props>(), {
  mode: 'add',
  regionId: 0
})

const emit = defineEmits(['afterSubmit'])

const formRef = ref();

const form = reactive<pointDTO>({
  positionName: '',
  regionId: 0,
  remark: ''
})

const validPositionName = (rule: any, value: any, callback: Function) => {
  if (value == '') {
    callback(new Error(`请输入点位名称`));
  } else if (value.length > 60) {
    callback(new Error('只能输入1~60个字符'));
  } else {
    callback();
  }
}

const validRemark = (rule: any, value: any, callback: Function) => {
  if (value && value.length > 500) {
    callback(new Error('长度限制在500个字符'));
  } else {
    callback();
  }
}

const rules = reactive<FormRules<any>>({
  positionName: [{required: true, validator: validPositionName, trigger: 'change'}],
  remark: [{validator: validRemark, trigger: 'change'}]
})

const dialogFormVisible = ref<Boolean>(false);

const submit =  async () => {
  if (!formRef) return
  formRef.value?.validate(async (valid: boolean) => {
    if (valid) {
      let res;
      let text = "创建";
      form.regionId = props.regionId;
      if (props.mode == "add") {
        form.id = undefined
        res = await createPositionApi(form);
      } else {
        res = await editPositionApi(form);
        text = "编辑";
      }
      if (res.data.code == 0) {
        ElMessage.success(`${text}成功`)
        emit('afterSubmit')
        dialogFormVisible.value = false;
      }
    } else {
      return false
    }
  })
}

watch(() => dialogFormVisible, (newVal) => {
  if(!newVal) {
    Object.assign(form, {
      positionName: '',
      regionId: 0,
      remark: ''
    })
    formRef.value.resetFields();
  }
})
defineExpose({
  dialogFormVisible,
  form
})

</script>

<style scoped>

</style>